"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Settings, Shield, Bell, Database, Globe } from "lucide-react"

export default function SettingsPage() {
  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-3xl font-bold tracking-tight">系统设置</h2>
        <p className="text-muted-foreground">管理系统配置和参数</p>
      </div>

      <Tabs defaultValue="general" className="space-y-4">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="general">基础设置</TabsTrigger>
          <TabsTrigger value="security">安全设置</TabsTrigger>
          <TabsTrigger value="notification">通知设置</TabsTrigger>
          <TabsTrigger value="database">数据库</TabsTrigger>
          <TabsTrigger value="system">系统信息</TabsTrigger>
        </TabsList>

        <TabsContent value="general" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Settings className="mr-2 h-5 w-5" />
                基础配置
              </CardTitle>
              <CardDescription>系统基本信息和配置</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="system-name">系统名称</Label>
                  <Input id="system-name" defaultValue="RBAC管理后台" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="system-version">系统版本</Label>
                  <Input id="system-version" defaultValue="v1.0.0" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="system-description">系统描述</Label>
                <Textarea
                  id="system-description"
                  defaultValue="基于角色的访问控制管理系统，提供用户、角色、权限的统一管理"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="admin-email">管理员邮箱</Label>
                  <Input id="admin-email" type="email" defaultValue="admin@example.com" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="support-phone">支持电话</Label>
                  <Input id="support-phone" defaultValue="+86 400-123-4567" />
                </div>
              </div>
              <Separator />
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>维护模式</Label>
                  <p className="text-sm text-muted-foreground">启用后系统将进入维护状态</p>
                </div>
                <Switch />
              </div>
              <div className="flex justify-end">
                <Button>保存设置</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="security" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Shield className="mr-2 h-5 w-5" />
                安全配置
              </CardTitle>
              <CardDescription>系统安全相关设置</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="session-timeout">会话超时时间（分钟）</Label>
                  <Input id="session-timeout" type="number" defaultValue="30" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="max-login-attempts">最大登录尝试次数</Label>
                  <Input id="max-login-attempts" type="number" defaultValue="5" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="password-min-length">密码最小长度</Label>
                  <Input id="password-min-length" type="number" defaultValue="8" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="password-expire-days">密码过期天数</Label>
                  <Input id="password-expire-days" type="number" defaultValue="90" />
                </div>
              </div>
              <Separator />
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>强制使用复杂密码</Label>
                    <p className="text-sm text-muted-foreground">要求密码包含大小写字母、数字和特殊字符</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>启用双因素认证</Label>
                    <p className="text-sm text-muted-foreground">为管理员账户启用2FA验证</p>
                  </div>
                  <Switch />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>记录登录日志</Label>
                    <p className="text-sm text-muted-foreground">记录所有用户的登录活动</p>
                  </div>
                  <Switch defaultChecked />
                </div>
              </div>
              <div className="flex justify-end">
                <Button>保存设置</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="notification" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Bell className="mr-2 h-5 w-5" />
                通知配置
              </CardTitle>
              <CardDescription>系统通知和消息设置</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="smtp-server">SMTP服务器</Label>
                <Input id="smtp-server" defaultValue="smtp.example.com" />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="smtp-port">SMTP端口</Label>
                  <Input id="smtp-port" type="number" defaultValue="587" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="smtp-username">SMTP用户名</Label>
                  <Input id="smtp-username" defaultValue="noreply@example.com" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="smtp-password">SMTP密码</Label>
                <Input id="smtp-password" type="password" placeholder="••••••••" />
              </div>
              <Separator />
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>用户注册通知</Label>
                    <p className="text-sm text-muted-foreground">新用户注册时发送邮件通知</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>密码重置通知</Label>
                    <p className="text-sm text-muted-foreground">密码重置时发送邮件通知</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>系统异常通知</Label>
                    <p className="text-sm text-muted-foreground">系统发生异常时通知管理员</p>
                  </div>
                  <Switch defaultChecked />
                </div>
              </div>
              <div className="flex justify-end">
                <Button>保存设置</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="database" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Database className="mr-2 h-5 w-5" />
                数据库配置
              </CardTitle>
              <CardDescription>数据库连接和备份设置</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="db-host">数据库主机</Label>
                  <Input id="db-host" defaultValue="localhost" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="db-port">端口</Label>
                  <Input id="db-port" type="number" defaultValue="3306" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="db-name">数据库名称</Label>
                  <Input id="db-name" defaultValue="rbac_system" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="db-username">用户名</Label>
                  <Input id="db-username" defaultValue="root" />
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="db-password">密码</Label>
                <Input id="db-password" type="password" placeholder="••••••••" />
              </div>
              <Separator />
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <Label>自动备份</Label>
                    <p className="text-sm text-muted-foreground">每日自动备份数据库</p>
                  </div>
                  <Switch defaultChecked />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label htmlFor="backup-time">备份时间</Label>
                    <Input id="backup-time" type="time" defaultValue="02:00" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="backup-retention">保留天数</Label>
                    <Input id="backup-retention" type="number" defaultValue="30" />
                  </div>
                </div>
              </div>
              <div className="flex justify-between">
                <Button variant="outline">测试连接</Button>
                <Button>保存设置</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="system" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center">
                <Globe className="mr-2 h-5 w-5" />
                系统信息
              </CardTitle>
              <CardDescription>当前系统运行状态和信息</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>系统版本</Label>
                  <div className="flex items-center space-x-2">
                    <Badge variant="outline">v1.0.0</Badge>
                    <Badge variant="secondary">稳定版</Badge>
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>运行时间</Label>
                  <p className="text-sm">15天 8小时 32分钟</p>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>数据库状态</Label>
                  <div className="flex items-center space-x-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-sm">正常连接</span>
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>缓存状态</Label>
                  <div className="flex items-center space-x-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                    <span className="text-sm">运行正常</span>
                  </div>
                </div>
              </div>
              <Separator />
              <div className="space-y-2">
                <Label>系统统计</Label>
                <div className="grid grid-cols-4 gap-4 text-center">
                  <div className="p-3 border rounded-lg">
                    <div className="text-2xl font-bold text-primary">1,234</div>
                    <div className="text-sm text-muted-foreground">总用户数</div>
                  </div>
                  <div className="p-3 border rounded-lg">
                    <div className="text-2xl font-bold text-primary">8</div>
                    <div className="text-sm text-muted-foreground">角色数量</div>
                  </div>
                  <div className="p-3 border rounded-lg">
                    <div className="text-2xl font-bold text-primary">156</div>
                    <div className="text-sm text-muted-foreground">权限节点</div>
                  </div>
                  <div className="p-3 border rounded-lg">
                    <div className="text-2xl font-bold text-primary">24</div>
                    <div className="text-sm text-muted-foreground">菜单项目</div>
                  </div>
                </div>
              </div>
              <Separator />
              <div className="space-y-2">
                <Label>最近更新</Label>
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span>用户管理模块优化</span>
                    <span className="text-muted-foreground">2024-01-20</span>
                  </div>
                  <div className="flex justify-between">
                    <span>权限系统升级</span>
                    <span className="text-muted-foreground">2024-01-18</span>
                  </div>
                  <div className="flex justify-between">
                    <span>安全补丁更新</span>
                    <span className="text-muted-foreground">2024-01-15</span>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
